<template>
	<div class="editRecord">
		<el-form :model="formDefined" :rules="rules" label-position="left" ref="formDefined" label-width="70px">
            <el-form-item v-for="item in formDefined.archive_content" :title="item.field_name" :key="item.field_id" :label="item.field_name">
                <el-radio-group v-if="item.field_id == 3" v-model="item.value">
                    <el-radio label="男">男</el-radio>
                    <el-radio label="女">女</el-radio>
                </el-radio-group>
                <el-input v-else :disabled="item.field_id == 1" v-model="item.value"></el-input>
            </el-form-item>
            <el-form-item label-width="0" class="longItem">
                <uploader 
                    :options="uploadOptionsEnclosure" 
                    ref="uploaderEnclosure" 
                    :file-status-text="statusText" 
                    @files-added="fileAddEnclosure" 
                    @file-removed="fileRemovedEnclosure" 
                    @file-success="fileSuccessEnclosure" 
                    @file-error="fileFailEnclosure"  
                    class="uploader-example uploader-enclosure">
                        <uploader-unsupport></uploader-unsupport>
                        <uploader-btn :directory="false" :attrs="attrsEnclosure" :single="true">
                            <i class="el-icon-upload"></i>
                            <span>图片上传</span>
                        </uploader-btn>
                        <uploader-list v-show="0"></uploader-list>
                </uploader>
                <div class="enclosureBox">
                    <ul>
                        <li v-for="(item,index) in imgEnclosure" :key="index">
                            <i class="el-icon-close" @click="closeImage(item,index)"></i>
                            <el-image :src="BASE_URL + item" fit="cover" :preview-src-list="[BASE_URL + item]"></el-image>
                        </li>
                    </ul>
                </div>
            </el-form-item>
        </el-form>
        <div class="operation">
            <el-button @click="cancelSubmit">取 消</el-button>
            <el-button type="primary" @click="sureSubmit">确 定</el-button>
        </div>
	</div>
</template>
<script>
import { deepClone } from '../../../assets/js/charts/chartsTool';
    import {dataURLtoFile, isEmpty, uploaderFileFail} from './../../../tools/tool';
	export default {
        props: {
            teacherInfoId: Object
        },
	    data() {
		    return {
				formDefined: {},
                copyObj: {},
                rules: {},
                statusText: {
			      	success: '上传成功',
			      	error: '上传出错',
			     	uploading: '正在上传...',
			      	paused: '暂停',
			      	waiting: '等待上传'
				},
                uploadOptionsEnclosure: {
					target: this.BASE_URL+'/api/resource/res_upload',
					testChunks: false,
					headers:{Authorization : `Bearer `+this.$g.access_token},
				},
				enclosureType: '',
			  	uploadOrNotEnclosure:false, 		//是否已经上传
				attrsEnclosure: {accept: ["image/*"]},
                imgEnclosure: [],
	      	}
        },
        mounted () {
            window.UploaderFile = this.$refs.uploaderEnclosure.uploader
        },
        watch: {
            teacherInfoId: {
                handler(newVal, oldVal) {
                    this.getRecordManage(newVal)
                    this.getRecordImage(newVal)
                },
                deep: true,
                immediate: true
            },
        },
	    methods: {
            // 获取档案信息
            getRecordManage(obj) {
                const success = res =>{
                    let item = res.data
                    this.formDefined = item
                    this.copyObj = deepClone(this.formDefined)
                }
                let params = {
                    archive_id: obj.archive_id,
                    user_id: obj.userid
                }
                this.$ajax.get('/api/newarchive/people_archive', {params, func: {success}})
            },
            // 获取档案图片
            getRecordImage(obj) {
                const success = res =>{
                    // console.log(res, '获取档案图片')
                    this.imgEnclosure = res.data
                }
                let params = {
                    archive_id: obj.archive_id,
                    user_id: obj.userid
                }
                this.$ajax.get('/api/newarchive/people_archive_picture', {params, func: {success}})
            },
            fileAddEnclosure(file, fileList, event) {
                // let file_type = file[0].fileType.toLocaleLowerCase();
                // if (!['image/jpeg', 'image/bmp', 'image/png'].includes(file_type)) {
                //     this.$message.warning('只允许上传 bmp/jpg/jpeg/png 格式图片');
                //     UploaderFile.removeFile(fileList[0])
                // }
			},
			fileRemovedEnclosure(file) {
                
            },
            fileUpload() {
                UploaderFile.upload();
            },
			fileFailEnclosure(rootFile, file, message, chunk) {
          		uploaderFileFail(this, UploaderFile, file, message);
			},
			fileSuccessEnclosure(rootFile, file, message, chunk) {
                var mess = eval('(' + message + ')');
                mess = handleResponseData(mess);
			 	if(parseInt( mess.data.status ) === 1 ){
                    this.uploadOrNotEnclosure = true;
                    this.imgEnclosure.push(mess.data.file_path)
                }
                // console.log(rootFile, file, message, chunk,this.imgEnclosure, 'success')
            },
            closeImage(val, index) {
                this.imgEnclosure = this.imgEnclosure.filter((item, inx)=> index != inx)
                UploaderFile.fileList.length > 0 && UploaderFile.removeFile(UploaderFile.fileList[index])
            },
            sureSubmit() {
                // 提交图片
                this.submitPicture()
                // 提交档案信息
                const success = res => {
                    this.$emit("editInfo", false)
                }
                let arr = []
                for(let i = 0; i < this.formDefined.archive_content.length; i++) {
                    if(this.formDefined.archive_content[i].field_id == this.copyObj.archive_content[i].field_id && this.formDefined.archive_content[i].value != this.copyObj.archive_content[i].value){
                        arr.push(this.formDefined.archive_content[i].field_id)
                    }
                }
                let params = {
                    archive_id: this.formDefined.archive_id,
                    content: this.formDefined.archive_content,
                    change_field_id: arr
                }
                this.$ajax.put('/api/newarchive/people_archive', params, {func: {success}})
            },
            submitPicture() {
                const success = res => {}
                let params = {
                    archive_id: this.formDefined.archive_id,
                    pic_arr: this.imgEnclosure
                }
                this.$ajax.put('/api/newarchive/people_archive_picture', params, {func: {success}})
            },
            // 取消提交
            cancelSubmit() {
                this.$emit("editInfo", false)
            }
	    },
	}
</script>
<style lang="scss">
	.editRecord {
        .el-form {
            .el-form-item {
                width: 285px;
                display: inline-block;
                vertical-align: top;
                margin-left: 15px;
                .el-textarea__inner {
                    height: 6em;
                }
                .el-form-item__label {
                    white-space:nowrap; 
                    overflow:hidden; 
                    text-overflow:ellipsis;
                }
            }
            .el-form-item:nth-child(1),
            .el-form-item:nth-child(3n+4) {
                margin-left: 0;
            }

            .longItem {
                margin-left: 0;
                width: 890px;
                .el-form-item__content {
                    display: flex;
                    align-items: center;
                }
                .uploader {
                    width: 60px;
                    height: 80px;
                    padding-bottom: 20px;
                    box-sizing: border-box;
                    display: inline-block;
                    .uploader-btn {
                        border-color: #9cd1ff;
                        width: 60px;
                        height: 60px;
                        padding: 0;
                        display: flex;
                        flex-wrap: wrap;
                        justify-content: center;
                        align-items: center;
                        font-size: 12px;
                        color: #9cd1ff;
                        i {
                            font-size: 18px;
                        }
                    }
                }
                .enclosureBox {
                    margin-left: 10px;
                    display: inline-block;
                    width: 810px;
                    height: 80px;
                    overflow: hidden;
                    ul {
                        overflow-x: scroll;
                        overflow-y: hidden;
                        white-space: nowrap;
                        height: 60px;
                        width: 810px;
                        padding-bottom: 20px;
                        li {
                            display: inline-block;
                            height: 60px;
                            width: 100px;
                            // float: left;
                            text-align: center;
                            position: relative;
                            .el-image {
                                height: 100%;
                                width: 100%;
                            }
                            .el-image+.el-image {
                                margin-left: 5px;
                            }
                            >i {
                                position: absolute;
                                top: 0;
                                right: 0;
                                color: #fff;
                                background-color: red;
                                display: none;
                                z-index: 1;
                            }
                        }
                        li+li{
                            margin-left: 10px;
                        }
                        li:hover i{
                            display: block;
                        }
                    }
                    ul::-webkit-scrollbar {
                        width: 10px;
                        height: 10px;
                    }
                    ul::-webkit-scrollbar-track {
                        background-color: #fff;
                    }
                    ul::-webkit-scrollbar-thumb {
                        background: #e6e6e6;
                        border-radius: 5px;
                    }
                }
            }
            
        }
        .operation {
            text-align: center;
            padding-bottom: 20px;
            .el-button {
                width: 100px;
            }
        }
	}
</style>